<template>
    <!-- <v3-form :items="items" :model="model" :itemSlotIdx="[2, 4, 6]">
        <template #formItem="form">
            <el-form-item label="11111" prop="name.a">
                <el-input v-model="form['sex']" placeholder="请输入sex"></el-input>
            </el-form-item>
            <el-form-item label="22222" prop="alias">
                <el-input v-model="form['alias']" placeholder="请输入alias"></el-input>
            </el-form-item>
            <el-form-item label="33333" prop="address" :rules="[{ required: true, message: '请输入address', trigger: 'blur' }]">
                <el-input v-model="form['address']" placeholder="请输入address"></el-input>
            </el-form-item>
        </template>
    </v3-form> -->
    <v3-crud ref="pagecrud" :items="items" :model="model" :schema="member" @fetchError="handleFetch" @event="handleEvent" :columnSlotIdx="[2, 4]" :querySlotIdx="[1, 4]" :operationSlotIdx="[2, 6]"  :queryModel="queryModel">
        <template #tableColumn>
            <el-table-column label="table1" width="180" align="center" #default="{ row }">
                {{ row.agree }}
            </el-table-column>
            <el-table-column label="table2" width="180" align="center" #default="{ row }">
                {{ row.name }}
            </el-table-column>
        </template>
        <template #queryItem="{item}">
            <el-form-item label="query1" prop="sex">
                <el-select
                    v-model="item['sex']"
                    placeholder="Select"
                    style="width: 240px"
                    >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="query2" prop="alias">
                <el-input v-model="item['alias']" placeholder="请输入alias"></el-input>
            </el-form-item>
            <!-- <el-form-item label="33333" prop="address">
                <el-input v-model="item['address']" placeholder="请输入address"></el-input>
            </el-form-item> -->
        </template>
        <template #operationItem="{item}">
            <el-button @click="test(item)">
                11111
            </el-button>
            <el-button @click="test(item)">
                22222
            </el-button>
        </template>
    </v3-crud>
    <el-button @click="handleQuery">cehi</el-button>
    <el-button @click="handleTableSelection">table</el-button>
</template>
<script setup>
import member from './config'
import v3Form from '../components/widget/v3Form.vue'
console.log('v3Form---', v3Form)
// import asyncSelect from '../components/widget/asyncSelect.vue'
// import fileUpload from '../components/widget/fileUpload.vue'
// import imgUpload from '../components/widget/imgUpload.vue'
// import selectTree from '../components/widget/selectTree.vue'
// import datePicker from '../components/widget/datePicker.vue'
import {v3Crud} from '../../dist/v3crud.js'
// import { usePageInfo } from '../hooks/pageInfo'
// import { tool } from '../../dist/v3Crud.js'
// const { usePageInfo } = tool
import { reactive, ref } from 'vue';
// const pageObj = usePageInfo();
// console.log('pageObj---', pageObj)
const pagecrud = ref(null)
const handleFetch = (obj) => {
    console.log('handleFetch---', obj)
}
const handleEvent = (obj) => {
    console.log('handleEvent---', obj)
}
const handleQuery = (obj) => {
    const obj1 = pagecrud.value.getData()
    console.log('getData---', obj1)
}
const handleTableSelection = (obj) => {
    const obj1 = pagecrud.value.getTableSelection()
    console.log('handleTableSelection---', obj1)
}
const test = (obj, row) => {
    console.log('test---', obj, row)
}
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const queryModel = reactive({
    "sex": "",
    'alias': "",
})
const dialogModel = reactive({
    "sex": "男",
    'alias': "张三",
    "address": "北京市",
})
const items = [
    {
        "label": "用户名称",
        "prop": "name.a",
        "tag": "input",
        "config": {
            "clearable": true,
            "placeholder": "请输入用户名称",
            "data": {},
            "rules": [{ "required": true, "message": '请输入用户名称', "trigger": 'blur' }]
        }
    },
    {
        "label": "手机号码",
        "prop": "phone",
        "config": {
            "tableLogic": "obj?.phone == '3' # rowClass('p-1')",
            "data": {}
        },
        "logic": "obj?.phone == '3'",
        "rowClass": "p-1"
    },
    {
        "label": "状态",
        "prop": "status",
        "tag": "select",
        "config": {
            "reqField": "status",
            "enums": {
                "active": "激活",
                "inactive": "禁用",
                "blocked": "锁定"
            }
        }
    },
    {
        "label": "创建时间",
        "prop": "createdAt",
        "tag": "datetimerange",
        "config": {
            "data": {}
        },
        "auxFunc": "dateFormatter2YMDHMS"
    },
    {
        "label": "性别",
        "prop": "sex",
        "tag": "select",
        "config": {
            "data": {
                "options": [
                    { "label": "男", "value": "男" },
                    { "label": "女", "value": "女" }
                ]
            }
        }
    },
    {
        "label": "邮箱",
        "prop": "email",
        "tag": "child",
        "config": {
            "clearable": true,
            "placeholder": "请输入email",
            "data": {},
        }
    },
    {   
        "prop": "createdAt",
        "tag": "button",
        "operations": [
            {
                "label": "编辑",
                "method": (obj, row) => {test(obj, row)},
                "className": "edit"
            },
            {
                "label": "删除",
                "method": (obj, row) => {test(obj, row)},
                "className": "delete"
            }
        ]
    }
]
const model = reactive({
        "status": 'active',
        "name.a": "张大千",
        "phone": 18,
        "sex": "男",
        'alias': "张三",
        "address": "北京市",
        'email': "123456789@qq.com",
        "createdAt": ["2022-08-01 00:00:00","2022-09-01 00:00:00"],
    })

</script>
<style>
:root{
    --el-color-primary: #67c23a;
    --el-color-primary-light-5: rgb(179, 224.5, 156.5);
    --el-color-primary-light-7: rgb(209.4, 236.7, 195.9);
    --el-color-primary-light-9: rgb(239.8, 248.9, 235.3);
}
.p-1{
    background-color: bisque;
}

.p-3 {
    background-color: aquamarine;
}
.normal{
    color: green;font-size: 14px;
}
.danger{
    color: red;font-size: 16px;
}
</style>
